<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.css">
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.js"></script>

    <style>
        .row {
            margin-bottom: 30px;
            margin-right: 0 !important;
            margin-left: 0 !important;
        }

        .form-group {
            margin-bottom: 30px;
        }

        .submit {
            margin-left: 30px;
        }

        .modal-btns {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="navbar-header">
            <ol class="breadcrumb">
                <li><a href="${pageContext.request.contextPath}/system/article/toMain" class="btn btn-primary btn-sm"
                       role="button"><span class="glyphicon glyphicon-home pull-right" aria-hidden="true"></span>&nbsp;&nbsp;
                    主&nbsp;&nbsp; 页</a></li>
                <li class="active">文章类管理</li>
                <li><a href="${pageContext.request.contextPath}/system/article/">文章管理</a></li>
                <li class="active">文章添加</li>
            </ol>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <!-- 右为普通导航条 -->
            <!--<a class="btn btn-default" href="#" role="button" id = "msg">Link</a>-->
            <ul class="nav navbar-nav navbar-right">
                <!--<li><a href="#">当前用户:<span class="badge">小明</span></a></li>-->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">当前用户:<span class="badge">${sessionScope.user.userName}</span><span
                            class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">修改密码</a></li>
                        <li><a href="#">个人详情</a></li>
                    </ul>
                </li>
                <li>
                    <a href="${pageContext.request.contextPath}/system/user/loginOut">
                        <span class="glyphicon glyphicon glyphicon-lock" aria-hidden="true"></span>注销
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2">
            <form class="form-horizontal" action="#" method="post" enctype="multipart/form-data">
                <!-- 文章标题-->
                <div class="form-group">
                    <label for="articleTitle" class="col-lg-2 control-label">标&nbsp;&nbsp;&nbsp;题
                        &nbsp;<span class="glyphicon glyphicon-star" aria-hidden="true"
                                    style="color: red!important;"></span>
                    </label>
                    <div class="col-lg-10">
                        <input type="text" class="form-control" id="articleTitle" name="newsTitle"
                               placeholder="输入标题" value="${requestScope.updateArticle.newsTitle}">
                        <span id="articleTitleMessage"></span>
                    </div>

                </div>

                <div class="form-group">
                    <label for="articleSummary" class="col-lg-2 control-label">简&nbsp;&nbsp;&nbsp;&nbsp;介</label>
                    <div class="col-lg-10">
                        <input type="text" class="form-control" id="articleSummary" name="newsSummary"
                               placeholder="输入简介" value="${requestScope.updateArticle.newsSummary}">
                    </div>
                </div>

                <!-- 演示初始化下拉列表的功能 -->
                <div class="form-group">
                    <label for="articleType" class="col-lg-2 control-label">文章类型</label>
                    <div class="col-lg-10">
                        <select class="form-control" name="typeId" id="articleType">
                            <option value="${requestScope.updateArticle.articleType.typeId}">${requestScope.updateArticle.articleType.typeName}</option>
                        </select>
                    </div>
                </div>

                <!-- 演示图片上传功能 -->
                <div class="form-group">
                    <label class="control-label col-lg-2" for="file">图&nbsp;&nbsp;&nbsp;&nbsp;片</label>
                    <div class="col-lg-10">
                        <input type="file" id="file" name="file" multiple>
                        <span>上次图片: ${requestScope.updateArticle.newsImgUrl}</span>
                        <br/>
                        <span id="fileMessage"></span>
                    </div>

                </div>

                <div class="form-group">
                    <label class="control-label col-lg-2" for="content">文章内容
                        &nbsp;<span class="glyphicon glyphicon-star" aria-hidden="true"
                                    style="color: red!important;"></span>
                    </label>
                    <div class="col-lg-10">
                        <textarea rows="30" cols="40" name="newsContent" id="content" class="form-control"
                                  style="resize: none" >${requestScope.updateArticle.newsContent}</textarea><br/>
                        <span id="articleContentMessage"></span>
                    </div>
                </div>

                <%--<div class="modal-btns">--%>
                <div class="form-group">
                    <div class="col-lg-3 col-lg-offset-6">
                        <button type="submit" class="btn btn-primary">修 改</button>
                    </div>
                </div>
                <%--</div>--%>
            </form>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    let old_title="";
    let titleFlag=false;
    let title_is_exist =true;
    function showMessage(slecteor,message){
        $(slecteor).html(message).css("color","red");
    }

    $("#articleTitle").on("blur",function () {
        showMessage("#articleTitleMessage","");
        let val= $(this).val().trim();
        if (val!=old_title || val ==""){
                title_is_exist=false;
            if (val==""){
                showMessage("#articleTitleMessage","标题不能为空");
            }else if (!/^[a-zA-Z0-9\u4E00-\u9FFF]{4,}$/.test(val)){
                showMessage("#articleTitleMessage","标题不满足规则");
            }else {
                $.ajax({
                    url:"${pageContext.request.contextPath}/system/article/check-is-exist",
                    data:"title="+val,
                    type:"get",
                    dataType:"json",
                    success:function (result) {
                        console.log(result);
                        if (result){
                            showMessage("#articleTitleMessage","标题已存在，请重新输入");
                        }else {
                            title_is_exist=false;
                        }
                    }
                })
            }
        }

    })

    $("#articleTitle").on("focus",function () {
        showMessage("#articleTitleMessage","");

    })
    let content_flag=false;
    $("#content").on("blur",function () {
        if ($(this).val().trim()==""){
            showMessage("#articleContentMessage","文章内容不能为空");
        }else {
            content_flag=true;
        }
    })

    $("#content").on("focus",function () {
        showMessage("#articleContentMessage","");
        content_flag=false;
    })

    $("button[type='submit']").on("click",function () {
        if (!title_is_exist&content_flag){
            let formData= new FormData($("form")[0]);
            formData.append("file",$("#file")[0].files[0]);
            formData.append("newsId","${requestScope.updateArticle.newsId}");
            $.ajax({
                url:"${pageContext.request.contextPath}/system/article/update",
                data: formData,
                cache:false,
                async:false,
                contentType:false,
                processData: false,
                type:"post",
                dataType: "json",
                success:function (result) {
                    console.log(result);
                    if(result.success){
                        alert(result.message);
                        $(":input").val("");
                        $("select")[0].selectedIndex = 0;
                    }else {
                        console.log(result.code);
                        switch (result.code) {
                            case 100:
                                $.each(result.details.errors, function (i,n) {
                                    showMessage("#"+n.field+"Message", n.defaultMessage);
                                })
                                break;
                            case 150:
                                alert(alert(result.message));
                                break;
                            case 200:
                                alert(alert(result.message));
                                break;
                            default:
                                showMessage("#fileMessage", result.message);
                                break;
                        }
                    }
                }
            })
        }
        return false;
    })


</script>
</html>